<template>
	<!-- 搜索组件 -->
	<view class="cu-bar search bg-gradual-lightPink1"
		:style="{paddingLeft:`${setData.paddingLR}rpx`,paddingRight:`${setData.paddingLR}rpx`}">
		<view class="search-model round" :style="{backgroundColor:`${setData.color}`}">
			<view class="left_icon" @click="scanCode()" v-if="setData.showSc=='1'">
				<image src="../../static/image/sao-ma.png" mode=""
					:style="{width:`${setData.lIconSize}rpx`,height:`${setData.lIconSize}rpx`}"></image>
			</view>
			<view class="response flex align-center" hover-class="none"
				@click="jumpUrl('/pages/goods/goods-list/index?showHistory=true')">
				<view class="search_input" :style="{color:`${setData.textColor}`,fontSize:`${setData.textSize}rpx`}">
					{{setData.placeholder}}
				</view>
				<view class="cu-btn round bg-gradual-orange1">搜索</view>
			</view>
		</view>
		<view class="right_msg" @click="jumpUrl('/pages/message/msg-list/index')" v-if="setData.showMsg == '1'">
			<text class="cuIcon-notice nIcon"></text>
			<view>消息</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from '@/utils/api'

	export default {
		name: 'search-model',
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				setData: {
					showSc: "2",
					showMsg: "2",
					color: "#ffffff",
					placeholder: "请输入商品名称或编码",
					textColor: "#B3BAC5",
					textSize: 28,
					lIconSize: "40",
					paddingLR: "20"
				}
			};
		},
		onLoad() {},
		mounted() {},
		props: {
			newData: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			newData: {
				handler(val, oldVal) {
					if (val && val.showMsg) {
						this.setData = val
					}
				},
				immediate: true
			}
		},
		methods: {
			// 扫一扫
			scanCode() {
				app.checkLogin().then(res => {
					uni.scanCode({
						success: (res) => {
							api.getByBarcode(res.result).then(res => {
								if (res.data && res.data.id) {
									uni.navigateTo({
										url: '/pages/goods/goods-detail/index?id=' +
											res.data.id
									})
								}
							})
						}
					})
				}).catch(() => {
					this.$emit('showPop')
				})
			},
			jumpUrl(url) {
				app.checkLogin().then(res => {
					uni.navigateTo({
						url
					})
				}).catch(() => {
					this.$emit('showPop')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		min-height: 120rpx
	}

	.search-model {
		height: 74rpx;
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
	}

	.search-model .left_icon {
		padding-right: 15rpx;
		margin-right: 5rpx;
		height: 100%;
		display: flex;
		align-items: center;
		border-right: 1rpx solid #DCDCDC;
		height: 54rpx;
	}

	.search-model .search_input {
		flex: 1;
		width: 0;
		height: 55rpx;
		line-height: 55rpx;
		margin-left: 10rpx;
	}

	.search-model .interval {
		border-left: 1rpx solid #DCDCDC;
		padding-left: 15rpx;
	}

	.search-model ::v-deep.input-placeholder {
		color: #B3BAC5;
	}

	.search-model .cu-btn {
		height: 55rpx;
		line-height: 55rpx;
	}

	.search .right_msg {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
		margin-right: 10rpx;
		font-size: 22rpx;
	}

	.search .right_msg .nIcon {
		font-size: 36rpx;
	}
</style>